<template>
	<view class="chat-container">
		<view class="header">
			<text class="title">对话</text>
			<view class="search-box">
				<input 
					class="search-input" 
					placeholder="搜索道友..." 
					v-model="searchText"
					@input="onSearch"
				/>
			</view>
		</view>
		
		<view class="chat-list">
			<view 
				class="chat-item" 
				v-for="(chat, index) in filteredChatList" 
				:key="index"
				@click="openChat(chat)"
			>
				<view class="chat-avatar">
					<text class="avatar-icon">{{ chat.avatar }}</text>
					<view class="online-status" :class="{ online: chat.isOnline }"></view>
				</view>
				<view class="chat-info">
					<view class="chat-header">
						<text class="chat-name">{{ chat.name }}</text>
						<text class="chat-time">{{ chat.lastTime }}</text>
					</view>
					<text class="chat-preview">{{ chat.lastMessage }}</text>
					<view class="chat-meta">
						<text class="unread-count" v-if="chat.unreadCount > 0">{{ chat.unreadCount }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="empty-state" v-if="filteredChatList.length === 0">
			<text class="empty-icon">💬</text>
			<text class="empty-text">暂无对话</text>
		</view>
		
		<view class="new-chat-btn" @click="startNewChat">
			<text class="btn-icon">+</text>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const searchText = ref('')
const chatList = ref([
	{
		id: 1,
		name: '道友张三',
		lastMessage: '道友，关于道德经第三章的理解，您有什么看法？',
		lastTime: '10:30',
		avatar: '👤',
		isOnline: true,
		unreadCount: 2
	},
	{
		id: 2,
		name: '道友李四',
		lastMessage: '感谢您的分享，受益匪浅！',
		lastTime: '昨天',
		avatar: '🧘',
		isOnline: false,
		unreadCount: 0
	},
	{
		id: 3,
		name: '道友王五',
		lastMessage: '您推荐的养生方法很有效',
		lastTime: '周一',
		avatar: '🌿',
		isOnline: true,
		unreadCount: 1
	},
	{
		id: 4,
		name: '道友赵六',
		lastMessage: '一起探讨庄子的逍遥游吧',
		lastTime: '上周',
		avatar: '🦋',
		isOnline: false,
		unreadCount: 0
	}
])

// 计算属性
const filteredChatList = computed(() => {
	if (!searchText.value) {
		return chatList.value
	}
	return chatList.value.filter(chat => 
		chat.name.includes(searchText.value) || 
		chat.lastMessage.includes(searchText.value)
	)
})

// 方法
const onSearch = () => {
	// 搜索逻辑已在计算属性中处理
}

const openChat = (chat) => {
	uni.navigateTo({
		url: `/pages/chat/detail?id=${chat.id}&name=${chat.name}`,
		fail: () => {
			uni.showToast({
				title: '聊天详情页开发中',
				icon: 'none'
			})
		}
	})
}

const startNewChat = () => {
	uni.navigateTo({
		url: '/pages/chat/new',
		fail: () => {
			uni.showToast({
				title: '新建聊天功能开发中',
				icon: 'none'
			})
		}
	})
}

// 生命周期
onMounted(() => {
	console.log('对话页面已挂载')
})
</script>

<style scoped>
.chat-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 20rpx;
	position: relative;
}

.header {
	padding: 40rpx 0;
	text-align: center;
}

.title {
	display: block;
	font-size: 48rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 30rpx;
}

.search-box {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50rpx;
	padding: 20rpx 30rpx;
	margin: 0 20rpx;
}

.search-input {
	width: 100%;
	font-size: 28rpx;
	color: #333333;
}

.chat-list {
	padding: 20rpx;
}

.chat-item {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	transition: all 0.3s ease;
}

.chat-item:active {
	transform: scale(0.98);
	background: rgba(255, 255, 255, 1);
}

.chat-avatar {
	position: relative;
	width: 100rpx;
	height: 100rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 30rpx;
}

.avatar-icon {
	font-size: 40rpx;
}

.online-status {
	position: absolute;
	bottom: 5rpx;
	right: 5rpx;
	width: 20rpx;
	height: 20rpx;
	background: #cccccc;
	border-radius: 50%;
	border: 3rpx solid #ffffff;
}

.online-status.online {
	background: #4CAF50;
}

.chat-info {
	flex: 1;
}

.chat-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.chat-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.chat-time {
	font-size: 24rpx;
	color: #999999;
}

.chat-preview {
	display: block;
	font-size: 28rpx;
	color: #666666;
	margin-bottom: 10rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chat-meta {
	display: flex;
	justify-content: flex-end;
}

.unread-count {
	background: #ff4757;
	color: #ffffff;
	font-size: 20rpx;
	padding: 8rpx 12rpx;
	border-radius: 20rpx;
	min-width: 32rpx;
	text-align: center;
}

.empty-state {
	text-align: center;
	padding: 100rpx 0;
}

.empty-icon {
	font-size: 120rpx;
	margin-bottom: 30rpx;
	display: block;
}

.empty-text {
	font-size: 32rpx;
	color: rgba(255, 255, 255, 0.8);
}

.new-chat-btn {
	position: fixed;
	bottom: 40rpx;
	right: 40rpx;
	width: 120rpx;
	height: 120rpx;
	background: #667eea;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
	transition: all 0.3s ease;
}

.new-chat-btn:active {
	transform: scale(0.9);
}

.btn-icon {
	font-size: 60rpx;
	color: #ffffff;
	font-weight: bold;
}
</style>
